<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      <SvgIcon
        customClass="nav-change-size"
        iconName="ant-design:font-size-outlined"
      ></SvgIcon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="item in sizeOptions"
          :key="item.label"
          :disabled="item.value === componetSizeStore.getCurrentSize"
          @click="changeSize(item.value as Size)"
        >
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts" setup>
import type { Size } from "@/plugins/element";
import { useComponentSizeStore } from "@/stores/componentSizeStore";

const componetSizeStore = useComponentSizeStore();

const sizeOptions = ref([
  { label: "Default", value: "default" },
  { label: "Large", value: "large" },
  { label: "Small", value: "small" }
]);

const changeSize = (size: Size) => {
  componetSizeStore.setComponentSize(size);
};
</script>

<style lang="scss" scoped>
.nav-change-size {
  // width: 20px;
  // height: 20px;
  @apply w-2em h-2em;
}
</style>
